<template>
  <view class="take-order">
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="填写订单" />
    </view>
    <!-- 进度条 -->
    <view class="process">
      <uni-steps :options="processList" :active="active" activeColor="#2abbaf" />
    </view>
    <!-- 服务项目 -->
    <view class="program">
      <text class="title">服务项目</text>
      <text class="content-text">{{program.name}}</text>
    </view>
    <!-- 项目信息 -->
    <view class="info">
      <uni-card title="项目信息">
        <view class="list">
          <view class="item" @click="callchoiceHospital">
            <text>就诊医院</text>
            <text v-if="!hospital.name">请选择你要就诊的医院</text>
            <text v-else class="has">{{hospital.name}}</text>
          </view>
          <view class="item" @click="callchoiceSection">
            <text>就诊科室</text>
            <text v-if="!section.name">请选择您要预约的科室</text>
            <text v-else class="has">{{section.name}}</text>
          </view>
          <view class="item">
            <text>期望就诊时间</text>
            <view class="servicetime">
              <uni-datetime-picker start="2024-08-26" placeholder="请选择就诊时间" type="datetime" return-type="timestamp"
                v-model="formData.hopeTime" />
            </view>
          </view>
        </view>
      </uni-card>
    </view>

    <view class="info">
      <uni-card title="选择服务人员">
        <view class="list">
          <view class="item" @click="callChoiceStaff">
            <text>服务人员</text>
            <text v-if="!staff.name">请选择服务人员</text>
            <text v-else class="has">{{staff.name}}</text>
          </view>
          <view class="item" v-if="staff.no">
            <text>工号</text>
            <text class="has">{{staff.no}}</text>
          </view>
        </view>
      </uni-card>
    </view>

    <view class="info">
      <uni-card title="就诊信息">
        <view class="list">
          <view class="item" @click="callChoicePaitent">
            <text>就诊人</text>
            <text v-if="!paitent.name">请选择就诊人</text>
            <text v-else class="has">{{paitent.name}}</text>
          </view>
          <view class="item" v-if="paitent.phone">
            <text>就诊人电话</text>
            <text v-if="paitent.phone" class="has">{{paitent.phone}}</text>
          </view>

          <view class="other">
            <text>服务需求（非必填）</text>
            <textarea v-model="formData.memberRemark" class="has" placeholder="请输入您的其它需求..."></textarea>
          </view>
        </view>
      </uni-card>
    </view>



    <view class="attention">
      <uni-card title="注意事项">
        <view>
          1.此业务仅为陪诊服务，如有问题请及时联系客服。
        </view>
        <view>
          2.下单成功后，因个人原因，就诊时间前12小时内取消订单-扣除5%服务费用，就诊时间前6小时内取消订单-扣除10%服务费用，就诊时间前3小时内取消订单-扣除50%服务费用，就诊时间前2小时内取消订单-扣除100%服务费用。
        </view>
      </uni-card>
    </view>
    <view class="card">
      <view class="card-content">
        <text class="price">￥ {{ ( program.price/100).toFixed(2)  }}</text>
        <view class="buy-btn" @click="submitOrder">立即下单</view>
      </view>
    </view>
    <!-- 弹出层 -->
    <uni-popup ref="choiceSection" type="bottom" background-color="#fff">
      <section-popu @sendSection:value="setSection" :choseId="hospital.id"></section-popu>
    </uni-popup>
    <uni-popup ref="choiceHospital" type="bottom" background-color="#fff">
      <choice-hospital-popu @sendHosptial:value="setHospital"></choice-hospital-popu>
    </uni-popup>
    <uni-popup ref="choicePaitent" type="bottom" background-color="#fff">
      <paitent-popu @sendpaitent:value="setPaitent"></paitent-popu>
    </uni-popup>
    <uni-popup ref="choiceStaff" type="bottom" background-color="#fff">
      <staff-popu @sendStaff:value="setStaff"></staff-popu>
    </uni-popup>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    showToastAndDo
  } from '@/utils/toast.js'
  import {
    useParamStore
  } from '@/stores/query-param';

  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    useUserInfo
  } from '@/stores/userinfo.js';

  const userInfo = useUserInfo()
  //获取参数
  const program = ref({
    cover: null,
    price: 0
  })
  const form = ref({
    serviceTime: null
  })
  onLoad(async (option) => {
    //判断登录信息
    userInfo.getLoginInfo()
    //获取项目信息
    // console.log(option);
    const programId = option.programId
    const staffId = option.staffId
    const result = await http.getRequest("/peizhen/open-city/program/get", {
      id: programId
    })
    if (result.code == 0) {
      program.value = result.data
    } else {
      uni.showToast({
        title: '获取服务信息失败',
        icon: 'error',
        duration: 1000
      })
    }
    //判断是否是从陪诊师护工页面跳转
    if (useParamStore().getChoiceStaff()) {
      staff.value = useParamStore().getChoiceStaff()
      //同时将staff值设为null，清除数据污染
      useParamStore().setChoiceStaff(null)
    }
    //判断是否是从医院页面跳转
    if (useParamStore().getChoiceHospital()) {
      hospital.value = useParamStore().getChoiceHospital()
      //同时将staff值设为null，清除数据污染
      useParamStore().setChoiceHospital(null)
    }
  })
  //进度条
  let active = 0;
  let processList = [{
    title: '填写订单'
  }, {
    title: '在线支付'
  }, {
    title: '服务中'
  }, {
    title: '服务完成'
  }];
  //导航返回
  function goback() {
    uni.navigateBack()
  }
  //获取医院
  const choiceHospital = ref(null)
  const hospital = ref({
    name: null
  })

  function callchoiceHospital() {
    if (choiceHospital.value) {
      console.log(choiceHospital.value)
      choiceHospital.value.open()
    }
  }

  function setHospital(value) {
    hospital.value = value
    console.log(hospital.value.name);
    //关闭弹窗
    choiceHospital.value.close()
  }
  //获取科室
  const choiceSection = ref(null)
  const section = ref({
    name: null
  })

  function callchoiceSection() {
    //先判断是否选择了医院
    if (!hospital.value.name) {
      uni.showToast({
        title: '请先选择医院',
        icon: 'error',
        duration: 2000
      })
      return
    }
    if (choiceSection.value) {
      choiceSection.value.open()
    }
  }

  function setSection(value) {
    section.value = value
    console.log(section.value.name);
    //关闭弹窗
    choiceSection.value.close()
  }

  //获取就诊人信息
  const choicePaitent = ref(null)
  const paitent = ref({
    name: ''
  })

  function callChoicePaitent() {
    if (choicePaitent.value) {
      choicePaitent.value.open()
    }
  }

  function setPaitent(value) {
    paitent.value = value
    console.log(paitent.value.name);
    //关闭弹窗
    choicePaitent.value.close()
  }

  //获取服务人员信息
  const choiceStaff = ref(null)
  const staff = ref({
    name: ''
  })

  function callChoiceStaff() {
    if (choiceStaff.value) {
      choiceStaff.value.open()
    }
  }

  function setStaff(value) {
    staff.value = value
    console.log(staff.value.name);
    //关闭弹窗
    choiceStaff.value.close()
  }

  //表单提交
  const formData = ref({
    hospitalId: null,
    hospitalName: null,
    sectionId: null,
    sectionName: null,
    hopeTime: null,
    //0，普通订单
    type: 0,
    memberId: null,
    memberRemark: null,
    programId: null,
    programName: null,
    paitentId: null,
    paitentName: null,
    staffId: null,
    staffName: null,
    payStatus: 0,
    totalPrice: 0,
    payPrice: 0
  })

  async function submitOrder() {
    if (validateForm()) {
      // 校验通过，执行提交操作  
      const result = await http.postRequest('/peizhen/order/create', formData.value)
      if (result.code == 0) {
        showToastAndDo('下单成功', 'success', 2000, () => {
          uni.navigateTo({
            url: `/pages/order/order-detail/order-detail?orderId=${result.data}`
          })
        })
      }else if(result.code==1110000007){
        showToastAndDo(result.msg, 'none', 2000, () => {
          uni.switchTab({
            url: '/pages/order/index'
          })
        })
      }
    }
  }
  //参数校验和赋值
  function validateForm() {
    formData.value.programId = program.value.id
    formData.value.memberId = userInfo.loginData.userId
    formData.value.programName = program.value.name
    formData.value.hospitalId = hospital.value.id
    formData.value.hospitalName = hospital.value.name
    formData.value.sectionId = section.value.id
    formData.value.sectionName = section.value.name
    formData.value.paitentId = paitent.value.id
    formData.value.paitentName = paitent.value.name
    formData.value.paitentName = paitent.value.name
    formData.value.paitentPhone = paitent.value.phone
    formData.value.staffId = staff.value.id
    formData.value.staffName = staff.value.name
    formData.value.totalPrice = program.value.price
    formData.value.payPrice = program.value.price
    // 姓名校验（简单示例，实际可能更复杂）  
    if (formData.value.programId == null) {
      uni.showToast({
        title: '请选择项目',
        icon: 'error'
      });
      return false;
    }
    if (!formData.value.hospitalId) {
      uni.showToast({
        title: '请选择医院',
        icon: 'error'
      });
      return false;
    }
    if (!formData.value.sectionId) {
      uni.showToast({
        title: '请选择科室',
        icon: 'error'
      });
      return false;
    }
    if (!formData.value.paitentId) {
      uni.showToast({
        title: '请选择就诊人',
        icon: 'error'
      });
      return false;
    }
    if (!formData.value.staffId) {
      uni.showToast({
        title: '请选择服务人员',
        icon: 'error'
      });
      return false;
    }

    return true;
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .take-order {
    background-color: #f5f5f5;
  }

  .process {
    position: fixed;
    z-index: 100;
    width: 710rpx;
    padding-top: 50rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    height: 120rpx;
    background-color: #fff;

    ::v-deep .uni-steps__row-title {
      font-size: 35rpx !important;
      text-align: center;
    }

    ::v-deep .uni-steps__row-container {
      margin-top: 15rpx;
    }

    ::v-deep .uni-steps__row-line-item {
      line-height: 30rpx !important;
    }

    ::v-deep .uni-steps__row-circle {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f0f8f7 !important;
    }

    ::v-deep .uni-icons {
      font-size: 60rpx !important;
    }
  }

  .program {
    margin: 190rpx 28rpx 20rpx 28rpx;
    border-radius: 10rpx;
    padding: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 35rpx;
      color: #3a3a3a;
    }

    .content-text {
      font-size: 30rpx;
      color: #22b9a3;
      font-weight: 700;
    }
  }

  //服务项目
  ::v-deep .uni-card__header-content-title {
    font-size: 35rpx !important;
  }

  .list {
    margin-top: 20rpx;

    .item {
      display: flex;
      justify-content: space-between;
      padding-bottom: 30rpx;
      padding-top: 30rpx;
      border-bottom: 1px solid #B7BDC6;
      color: #888888;

      ::v-deep .uni-date__x-input {
        color: #333333;
      }

    }

    .other {
      padding-bottom: 30rpx;
      padding-top: 30rpx;
      color: #B7BDC6;

      textarea {
        margin-top: 10rpx;
        background-color: #f5f5f5;
        padding: 20rpx;
        border-radius: 15rpx;
        width: 95%;
        height: 150rpx;
      }
    }


    .has {
      color: #333333;
      font-size: 30rpx;
      font-weight: 700;
    }
  }

  .attention {
    padding-bottom: 130rpx;
  }

  //付款按钮
  .card {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    background-color: #fff;
  }

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  .price {
    font-size: 45rpx;
    font-weight: bold;
    color: #22b9a3;
  }

  .buy-btn {
    margin-right: 20rpx;
    padding: 10rpx 40rpx;
    width: 200rpx;
    height: 50rpx;
    line-height: 50rpx;
    background-color: #22b9a3;
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    font-size: 28rpx;
  }
</style>